<template>
  <div id="lef">
    <a href="javascript:void(0)" class="b"><img src="@/assets/img/love.png"/></a>
    <p>

      <router-link to="/test">心理测试</router-link>
      <router-link to="/socket">聊天室</router-link>
      <!--  <a href="javascript:void(0)">我的空间</a>-->
      <router-link to='/personal' >我的空间</router-link>
      <!--  <router-view/>-->

    </p>
</div>

</template>

<script>
export default {
  name: "leftMessage"
}

</script>

<style scoped>

p{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  width: 11rem;
  height: 26rem;
  /*background-color: aqua;*/
  top: 9rem;
  left: -15rem;
  background-color: rgb(171,172,174,0.4);
  border-radius: 3%;
}

p>a{
  text-align: center;
  display: inline-block;
  line-height: 3rem;
  text-decoration: none;
  color: #ffffff;
  height: 3rem;
  width: 100%;
  font-weight: 900;
}
p>a:hover{
  background-color: rgb(187,187,187,0.3) ;
}
.b{
  text-align: center;
  line-height: 4.5rem;
  display: inline-block;
  position: absolute;
  border-radius:100%;
  width: 3rem;
  height: 3rem;
  top: 20rem;
  background-color: rgba(174, 174, 176, 0.4);
}
@keyframes revolve {
  from{
    transform: rotateZ(0deg);
  }
  to{
    transform: rotateZ(360deg);
  }

}
@keyframes move {
  from {
      left: -15rem;
  }
  to{
      left: 3rem;
  }
}
#lef:hover .b{
  animation-name: revolve;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
#lef:hover  p{
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/*p:hover{*/
/*  animation-play-state: paused;*/
/*}*/

</style>